<template>
	<view class="background">
		<view class="user-info-warp">
			<view class="user">
				<view class="userinfo">
					<image class="headImg" :src="userInfo.avatarUrl" mode=""></image>
				</view>
				<view class="mpIdWrap">
					<text class="name" @click="toLoginPage(userInfo.nickName)">{{userInfo.nickName || "请登录"}}</text>
					<text class="mpid" v-if="mpId">编号：{{mpId}}</text>
				</view>
			</view>
		</view>
		<view class="list-cell admin-cell">
			<view
				v-if="userType === 1 "
				@tap="jumpPage('/pages/my/send-car')"
				class="cell-item">
				<view class="cell-item admin-item">
					<image
						style="width: 60upx; height: 60upx;"
						src="../../static/mine_send_car_cell.png" />
					<text class="admin-text">派车</text>
				</view>
				<image :src="jumpIcon" />
			</view>
			<view
				v-if="userType === 3 "
				@tap="jumpPage('/pages/my/order-Schedule')"
				class="cell-item">
				<view class="cell-item admin-item">
					<image
						style="width: 60upx; height: 60upx;"
						src="../../static/mine_order_cell.png" />
					<text class="admin-text">核验订单</text>
				</view>
				<image :src="jumpIcon" />
			</view>
		</view>
		<view class="list-cell">
			<view
				@tap="jumpPage('/pages/my/Passenger-manage')"
				class="cell-item">
				<view class="cell-item">
					<image
						style="width: 60upx; height: 60upx;"
						src="../../static/mine_passenger_cell.png" />
					<text>乘车人信息</text>
				</view>
				<image :src="jumpIcon" />
			</view>
			<view 
				@tap="jumpPage('/pages/ticket/ticket-list?enterType=my')"
				class="cell-item">
				<view class="cell-item">
					<image
						style="width: 60upx; height: 60upx;"
						src="../../static/mine_invoice_cell.png" />
					<text>发票抬头</text>
				</view>
				<image :src="jumpIcon" />
			</view>
			<view 
				@tap="jumpPage('feedback')"
				class="cell-item">
				<view class="cell-item">
					<image
						style="width: 60upx; height: 60upx;"
						src="../../static/mine_opinion_cell.png" />
					<text>意见反馈</text>
				</view>
				<image :src="jumpIcon" />
			</view>
		</view>
		<view 
			@click="toTel()" 
			style="display: flex; flex-direction: row; justify-content: center; margin-top: 30upx;">
			<image
				style="width: 50upx; height: 50upx; margin-right: 10upx;"
				src="../../static/mine_customer_cell.png" />
			<text space="ensp" style="color: #2697FF; line-height: 50upx;">客服热线: 0877-2085619</text>
		</view>
		<image 
			@click="checkTicket()"
			v-if="userType === 3 " 
			class="qr_code_icon" 
			src="../../static/icon_sao.png"/>
	</view>
</template>

<script>
	import { mixins } from '../../common/mixins.js';
	import api from '../../api';
	import { mapState } from 'vuex'
	export default {
		mixins: [mixins],
		data() {
			return {
				userType: '',
				mpId: '',
				jumpIcon: '../../static/iocn_jump_gray.png',
			}
		},
		
		onPullDownRefresh() {
			this.checkLogin();
		},
		
		computed:{
			...mapState(['userInfo'])
		},
		
		onLoad(option) {
			uni.startPullDownRefresh();
			this.mpId = uni.getStorageSync("mpId")
		},
		
		methods: {
			async checkLogin() {
				const { code, data } = await api.login.checkLogin();
				if(code == 200) {
					this.userType = data?.type
				}
				uni.stopPullDownRefresh();  //停止下拉刷新动画
			},
			
			jumpPage(url) {
				if(this.checkToken()) {
					console.log(url);
					uni.navigateTo({ url });
				}
				else{
					this.toLogin()
				}
			},
			
			toSchedule(){
				uni.navigateTo({
					url:"/pages/my/order-Schedule"
				})
			},
			
			checkTicket(){	
				uni.scanCode({
				    success: function (res) {
				        console.log('条码类型：' + res.scanType);
				        console.log('条码内容：' + res.result);
						uni.navigateTo({
							url: '/pages/order/order-detail-check?orderDetailId='+res.result
						})
						
				    }
				});
			},
			
			toLoginPage(nickName){
				if(!nickName){
					uni.navigateTo({
						url:'/pages/auth/index'
					})
				}
			},
			
			// 拨打客服电话
			toTel(){
				uni.makePhoneCall({
				    phoneNumber: '0877-2085619'
				});
			},
			
			checkTicket() {
				uni.scanCode({
				    success: function (res) {
				        console.log('条码类型：' + res.scanType);
				        console.log('条码内容：' + res.result);
						uni.navigateTo({
							url: '/pages/order/order-detail-check?orderDetailId='+res.result
						})
						
				    }
				});
			},
		}
	}
</script>

<style lang="scss">
	.background {
		height: 100%;
		display: flex;
		flex-direction: column;
		position: relative;
		.user-info-warp {
			height: 270upx;
			background-size: 100% 270upx;
			background-image: url(../../static/mine_background_image.png);
			.user {
				display: flex;
				align-items: center;
				padding: 30upx;
				.mpIdWrap{
					display: flex;
					flex-direction: column;
					margin-left: 20upx;
					
					.mpid {
						display: flex;
						flex-direction: row;
						justify-content: center;
						background: linear-gradient(to right, #25A3FF, #25BDFF);
						color: #FFFFFF;
						font-size: 24upx;
						margin-top: 12upx;
						border-radius: 25upx;
						padding: 5upx;
						width: 150upx;
					}
				}
				
				.headImg{
					width: 135rpx;
					height: 135rpx;
					background: #ffffff;
					border-radius: 50%;
					
				}
			}
		}
		.admin-cell{
			border-bottom: 10px solid #EEEEEE;
			
			.admin-item{
				border-bottom: none;
				
				.admin-text{
					font-weight: bold;
					font-size: 34upx;
				}
			}
		}
		.list-cell {
			padding: 0 20upx;
			.cell-item {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				height: 120upx;
				border-bottom: solid 1upx #EFEFEF;
				text {
					margin-left: 20upx;
				}
				image {
					width: 40upx;
					height: 40upx;
				}
			}
		}
		.qr_code_icon {
			width: 180upx;
			height: 180upx;
			position: absolute;
			bottom: 40upx;
			right: 40upx;
		}
	}
</style>
